<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- {{}} 插值表达式 -->
      我的名字是 {{name}}
      <br />
      <div v-text="content"></div>
      <br />
      <!-- v-text和v-html都是获取data中的属性,但是v-html能够解析标签 -->
      <div v-html="content"></div>
      <!-- v-on:click == @click 表示用来点击的事件 -->
      <button @click="changeContent">改变content的内容</button>
      <p v-if="week==3">今天是星期三</p>
      <p v-else-if="week==4">今天是星期四</p>
      <p v-else>今天是星期五</p>
      <table>
        <tr>
          <th>编号</th>
          <th>域名</th>
          <th>状态</th>
          <th>注册时间</th>
          <th>过期时间</th>
          <th>分组</th>
        </tr>
        <!-- v-for指令专门用来实现循环的 item是循环出来的值 index是循环的下标 -->
        <tr v-for="(item,index) in domainList">
          <td>{{item.id}}</td>
          <td>{{item.domain}}</td>
          <td>{{item.status}}</td>
          <td>{{item.registrationDate}}</td>
          <td>{{item.expirationDate}}</td>
          <td>{{item.groupId}}</td>
        </tr>
      </table>
      <!-- v-model实现双向绑定，作用于表单上 -->
      请输入你的姓名：<input type="text" v-model="name" /> 我的姓名是：
      <h1>{{name}}</h1>
      <p></p>
      <!-- v-bind:用于属性的绑定 缩写是: -->
      <img :src="src" alt="" width="300px" />
      <button @click="getdomainList">获取域名的数据</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          name: "ange",
          content: "<h1>这是一级标题</h1>",
          flag: true,
          week: 4,
          domainList: [],
          src: "https://pic.rmb.bdstatic.com/bjh/250118/beautify/e39562ef6da2d6a38225cf95d39819de.jpeg",
        },
        created() {
            this.getdomainList();
        },
        methods: {
          changeContent() {
            // this表示当前的对象vm,vm里面有一个属性叫content
            this.content = "<i>123</i>";
          },
          getdomainList() {
            var that = this;
            // 上面的请求也可以这样做
            axios
              .get("http://localhost:8080/domain/selectDomainList")
              .then(function (response) {
                console.log(response.data)
                that.domainList = response.data;
              })
              .catch(function (error) {
                console.log(error);
              });
          },
        },
      });
    </script>
  </body>
</html>
